<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Toggle switch example</title>
    <style>
      * {
        box-sizing: border-box;
      }

      /* Flexbox fu to make the control and label line up */

      li {
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: relative;
      }

      /*
         Size the label, and make the on and off parts sit on top
         of one another using positioning
      */

      label {
        width: 20px;
        height: 20px;
        line-height: 20px;
        position: relative;
      }

      label span {
        position: absolute;
      }

      /*
         remove the default styling of the checkbox using appearance
         and create the outer toggle area
      */

      input[type="checkbox"] {
        -webkit-appearance: none;
        appearance: none;
        width: 44px;
        height: 24px;
        border-radius: 12px;
        border: 2px solid black;
        background: #eee;
        transition: all 0.4s;
      }

      /*
         style the ::before content to look like
         the inner toggle switch - the bit that moves
      */

      input[type="checkbox"]::before {
        width: 16px;
        height: 16px;
        border-radius: 9px;
        background-color: black;
        content: '';
        position: absolute;
        top: 7px;
        left: 16%;
        transition: all 0.4s;
      }

      /*
         change the outer background color and move the inner toggle switch
         when the checkbox is checked; use transitions for smooth animation
      */

      input[type="checkbox"]:checked {
        background-color: #ffaa00;
        transition: all 0.4s;
      }

      input[type="checkbox"]:checked::before {
        left: 35%;
        transition: all 0.4s;
      }

      /*
         cause the On and Off parts of the label to be visible when the checkbox is
         checked and unchecked, respectively
      */

      input[type="checkbox"] ~ label .on, input[type="checkbox"]:checked ~ label .off {
        opacity: 0;
      }

      input[type="checkbox"] ~ label .off, input[type="checkbox"]:checked ~ label .on {
        opacity: 1;
      }

      /*
         make the focus outline a bit more subtle on Chrome, rather than the
         default heavy blue outline
      */

      input:focus {
        outline: 1px dotted black;
      }

    </style>
  </head>
  <body>
    <ul>
      <li>
        <input type="checkbox" name="power" id="power">
        <label for="power"><span class="on">On</span> <span class="off">Off</span></label>
      </li>
    </ul>
  </body>
</html>
